﻿<html>
<head><title>XFTP</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
background-color:white;
}
.menu1, .menu3{
/*min-height:35px;*/
text-indent:10px;
border:2px solid black;
vertical-align:middle;
background-color:#eef;
}
.menu1{
background-image:url('icone48.png');
background-repeat:no-repeat;
background-position:right top;
}
.dev, .menu2{
padding:10px;
}
.dev{
width:50%;
min-width:300px;
border:1px solid black;
vertical-align:top;
padding:1px;
}
.menu2{
vertical-align:middle;
width:180px;
padding:2px;
}
#status{
height:80px;
border:2px solid black;
background-color:#eef;
}
#base{
width:100%;
height:80%;     /*tem que mudar pra 100 aqui*/
padding:0px;
margin:0px;
min-height:400px;
}

a{
color:blue;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
img{
width:30px;
height:30px;
}
.tree
{
font-family:Monospace;
}
.itemsel{
background-color:#ccf;
}
#serverDlg, #driverDlg, #overwriteDlg, #newDirDlg{
position:absolute;
border:3px solid blue;
display:none;
width:60%;
height:60%;
left:20%;
top:20%;
background-color:#fff
}
#fundao{
position:absolute;
display:none;
width:100%;
height:100%;
left:0px;
top:0px;
background-color:#000
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

function drawTree(id, data)
{
	var p= '';
	var h= '';
	var bar= '\\';
	var prev;
	
	if(data.drive != ''){
		p= data.drive+':';
		h= '<a href="'+data.drive+':\\">'+data.drive+'</a>:';
	}
	else
		bar= '/';
		
	$.each(data.path, function(i,item){
		prev= p;
		p+= bar+item;
		if(i < data.path.length-1)
			h+= bar+'<a href="'+p+'">'+item+'</a>';
		else
			h+= bar+item;
	});
	
	h= '<a href="'+prev+'"><img src="up.png" title="Nível acima" alt="Nível acima" /></a> '+h+bar;
	
	$(id+" div span").html(h);
	
	h= '<table class="tree">';
	
	$.each(data.file, function(i, item){
		h+= '<tr><td>'+item[0]+'</td><td>'+item[1]+'</td><td>'+item[2]+'</td></tr>';
	});
		
	$(id+" div + div").html(h+'</table>');
	
	$(".tree tr td:nth-child(2)").css({"text-align":"right"});
}

function refreshLocal(){
	var data= {
		"title": "lista local",
		"drive": "d",
		"path": ["projetos", "small", "chrome", "xftp"],
		"file": [
			["teste.php", 122, "1/2/3 1:2:3"],
			["c.d", 33342, "2/2/2 1:1:1"]
		]
	};
	
	//le direto do disco via npapi
	//........
	
	drawTree("#local", data);
	
	$(".path a").click(changeDir);  	
	$(".tree tr").click(selItem);

	return false;
}


var datarr= {
	"title": "lista local",
	"drive": "",    //tem que ser vazio para o remoto
	"path": ["root", "projetos", "small", "chrome", "xftp", "buga"],
	"file": [
		["a.b", 12322, "1/2/3 1:2:3"],
		["a.b", 12322, "1/2/3 1:2:3"],
		["a.b", 12322, "1/2/3 1:2:3"],
		["a.b", 12322, "1/2/3 1:2:3"],
		["a.b", 12322, "1/2/3 1:2:3"],
		["a.b", 12322, "1/2/3 1:2:3"],
		["a.b", 12322, "1/2/3 1:2:3"],
		["a.b", 12322, "1/2/3 1:2:3"],
		["c.d", 332, "2/2/2 1:1:1"]
	]
};

function refreshRemote(){
	
	//baixa do servidor via npapi
	///.........
	
	drawTree("#remote", datarr);
	
	datarr.file[1][1]++;
	
	$(".path a").click(changeDir);  	
	$(".tree tr").click(selItem);

	return false;
}	

function changeDir(){

	//processa a troca do path
	//....

	$("#debug").html($(this).attr("href"));
	
	if($(this).attr("href")[1] == ':')
		refreshLocal();
	else
		refreshRemote();

	return false;
}

function selItem(){
	$(this).toggleClass("itemsel");
}

$(document).ready(function(){
	refreshLocal();
	refreshRemote();
	
	$("#refrLocal").click(refreshLocal);
	$("#refrRemote").click(refreshRemote);

	$("#serverBtn").click(function(){
		$("#fundao").fadeTo("slow", 0.50);
		$("#serverDlg").show();
	});

	$("#driverBtn").click(function(){
		$("#fundao").fadeTo("slow", 0.50);
		$("#driverDlg").show();
	});
	
	$(".closeBtn").click(function(){
		$("#fundao").fadeOut("slow");
		$("#serverDlg").fadeOut("fast");
		$("#driverDlg").fadeOut("fast");
		$("#newDirDlg").fadeOut("fast");
		$("#overwriteDlg").fadeOut("fast");
	});
});
</script>

</head><body>

<table id="base">
<tr><td colspan="3" class="menu1">
<!--botoes menu principal-->
<a href="#" id="serverBtn"><img src="manager.png" title="Gerencia servidores" alt="Gerencia servidores" /></a>
<a href=""><img src="on.png" title="Conectar" alt="Conectar" style="margin-left:10px;" /></a>
<a href=""><img src="off.png" title="Desconectar" alt="Desconectar" /></a>
<a href=""><img src="stop.png" title="Parar" alt="Parar" style="margin-left:10px;" /></a>
</td></tr><tr>
<td id="local" class="dev"><div class="menu3">
<!--botoes menu local-->
<a href="#" id="refrLocal"><img src="refresh.png" title="Atualizar" alt="Atualizar" /></a>
<a href="#" id="driverBtn"><img src="drive.png" title="Trocar drive" alt="Trocar drive" /></a>
<a href="#" id="dirBtn"><img src="dir.png" title="Criar diretório" alt="Crir diretório" /></a>
<a href=""><img src="del.png" title="Apagar" alt="Apagar" /></a>
<span class="path">path</span></div>
<div>local</div></td>
<td class="menu2">
<a href=""><img src="up.png" title="Upload" alt="Upload" /></a>
<a href=""><img src="down.png" title="Download" alt="Download" style="margin-top:10px;" /></a>
</td>
<td id="remote" class="dev"><div class="menu3">
<!--botoes menu remoto-->
<a href="#" id="refrRemote"><img src="refresh.png" title="Atualizar" alt="Atualizar" /></a>
<a href="#" id="dirBtn"><img src="dir.png" title="Criar diretório" alt="Crir diretório" /></a>
<a href=""><img src="del.png" title="Apagar" alt="Apagar" /></a>
<span class="path">path</span></div>
<div>remote</div></td>
</tr>
<tr><td colspan="3" id="status">blablabla</td></tr></table>

<embed type="application/x-xftp" id="pluginId" width="2" height="2" />
<script type="text/javascript">
var plugin= document.getElementById("pluginId");
</script>

<!--debug-->
<div id="debug" style="border:2px solid red;">bug</div>

<!--dialogos-->
<div id="fundao">.</div>

<div id="serverDlg">
servidor
<a href="#" class="closeBtn">Fechar</a>
</div>

<div id="overwriteDlg">reescrever<a href="#" class="closeBtn">Fechar</a></div>

<div id="driverDlg">drivers<a href="#" class="closeBtn">Fechar</a></div>

<div id="newDirDlg">drivers<a href="#" class="closeBtn">Fechar</a></div>

</body></html>